<template>
    <div class="WebcastListBox">
        <span class="pageName">直播管理 > 直播列表</span>

        <!-- 搜索框 -->
        <div class="searchBox">
            <div class="searchInp">
                <label for="name">
                    昵称：
                </label>
                <el-input v-model="name" placeholder="请输入昵称" name="name" class="inp"></el-input>

                <el-button type="primary" @click="searchUser">搜索</el-button>
            </div>
        </div>

        <!-- 表格 -->
        <div class="tableBox">
            <el-table :data="webcastList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                tooltip-effect="dark" border style="width: 98%;font-size: 14px;margin: auto;margin-left: 30px;"
                :header-cell-style="{
                    background: '#015478', color: '#fff'
                }">
                <el-table-column prop="img" label="头像" align="center">
                    <template slot-scope="scope">
                        <img slot="reference" :src="scope.row.img" style="width: 30px;height: 30px">
                    </template>
                </el-table-column>
                <el-table-column prop="userId" label="用户ID" align="center">
                </el-table-column>
                <el-table-column prop="webcastID" label="直播ID" align="center">
                </el-table-column>
                <el-table-column prop="name" label="昵称" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" align="center">
                </el-table-column>
                <el-table-column prop="startTime" label="开播时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" align="center" width="140px">
                </el-table-column>
                <el-table-column prop="mode" label="状态" align="center">
                </el-table-column>

                <el-table-column prop="online" label="在线人数" align="center">
                </el-table-column>

                <el-table-column prop="giftNum" label="礼物数量" align="center">
                </el-table-column>

                <el-table-column prop="commentNum" label="评论数量" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button @click="banWebcast(scope.row)" type="text" style="color: #015478;font-size: 14px">{{
                            scope.row.operate
                        }}</el-button>

                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页器 -->
            <pagination :tableData="webcastList" @sizeChange="sizeChange" @currentChange="currentChange">
            </pagination>
        </div>
    </div>
</template>

<script>

import pagination from '@/components/pagination/pagination.vue';

export default {
    name: 'WebcastList',
    components: {
        pagination
    },
    data() {
        return {
            webcastList: [],
            currentPage: 1, // 当前页码
            total: '', // 总条数
            pageSize: 8, // 每页的数据条数

            // 输入框内容
            name: '',
        }
    },
    methods: {
        sizeChange(current, count) {
            this.currentPage = current;
            this.pageSize = count;
        },
        currentChange(current) {
            this.currentPage = current
        },
        // 搜索
        searchUser() {
            this.$axios({
                method: 'get',
                url: this.$api.webcast.webcastListSearch,
                params: {
                    name: this.name,

                }
            })
                .then(res => {
                    this.webcastList = res.data

                })
                .catch(err => {
                    console.log(err);
                })
        },
        banWebcast(row) {
            this.$axios({
                method: 'get',
                url: this.$api.webcast.banWebcast,
                params: {
                    id: row.id,
                    mode: row.mode,
                    operate: row.operate

                }
            })
                .then(res => {
                    if (res.data == 'success') {
                        this.$axios.get(this.$api.webcast.webcastList)
                            .then(res => {
                                this.webcastList = res.data;
                            })
                            .catch(err => {
                                console.log(err);
                            })
                    }

                })
                .catch(err => {
                    console.log(err);
                })
        }
    },

    created() {
        this.$axios.get(this.$api.webcast.webcastList)
            .then(res => {
                this.webcastList = res.data;
            })
            .catch(err => {
                console.log(err);
            })
    }

}
</script>

<style scoped>
.WebcastListBox {
    display: flex;
    flex-direction: column;
}

.searchBox {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.inp {
    width: 150px;
}

.searchInp {
    display: flex;
    align-items: center;
}

button {
    height: 40px;
    margin-left: 10px;
}

.tableBox {
    margin-left: 10px;
}

.cardBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 10px;
}
</style>